<template>
  <section>
    <h2>详情页面</h2>
    <ul>
      <li v-for="(post, index) in posts" :key="index">
        <nuxt-link :to="{ name: 'posts-id', params: { id: post.id } }">{{ post.title }}</nuxt-link>
      </li>
    </ul>
  </section>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'detail',
    head: {
      title: 'List of posts'
    },
    asyncData({ req, params }) {
      // We can return a Promise instead of calling the callback
      return axios.get('https://jsonplaceholder.typicode.com/posts')
        .then((res) => {
          return { posts: res.data.slice(0, 5) }
        })
    }
  }
</script>

<!--<style lang="less" scoped>-->
<!--section {-->
<!--h2 {-->
<!--color: #1da57a;-->
<!--}-->
<!--}-->
<!--</style>-->
